<template>
  <div class="news clearfix" >
    <ul>
      <li>
        <a href="#">
          <p>前端学习</p>
        </a>
      </li>
      <li>
        <a href="#">
          <p>bootstrap教程</p>
        </a>
      </li>
      <li>
        <a href="#">
          <p>vue教程学习</p>
        </a>
      </li>
      <li>
        <a href="#">
          <p>话痨合集</p>
        </a>
      </li>
      <li>
        <a href="#">
          <p>猪猪小木屋</p>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
    export default {
        name: "Banner"
    }
</script>

<style scoped>
  .news ul li{
    width: 25%;
    float: left;
    height: 128px;
    padding-right: 10px;
    margin-top: 8px;
  }
  .news li:nth-child(1)  {
    width: 50%;
    height: 265px;
    /*background-color: pink;*/
  }
  .news li a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    background-color: darkorchid;
  }
  .news li a p {
    width: 100%;
    height: 30px;
    position: absolute;
    color: white;
    left: 0;
    line-height: 30px;
    bottom: 0;
    /*取消bootstrap的默认底部margin*/
    margin-bottom: 0;
    background-color: rgba(0,0,0,0.5);
  }
  .news li:nth-child(1) a p {
    width: 100%;
    height: 30px;
    position: absolute;
    color: white;
    left: 0;
    line-height: 30px;
    bottom: 0;
    /*取消bootstrap的默认底部margin*/
    margin-bottom: 0;
    background-color: rgba(0,0,0,0.5);
  }
</style>
